<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/page.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="./js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
        <button>搜索</button>
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="./buy.html">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="head.html">首页</a></li>
        <li><a href="">枪模主题站</a></li>
        <li><a href="">服饰时尚</a></li>
        <li><a href="">包类专区</a></li>
        <li><a href="">数码外设</a></li>
        <li><a href="">家居日用</a></li>
        <li><a href="">模型手办</a></li>
      </ul>
    </div>
    <!-- 中间部分 -->
    <div class="content">
        <a href=""> <dl class="count">
            <dt class="box"><img src="./images/2.jpg" alt="">
            <dd class="good-info"> 
                <p class="good-name">蝴蝶Q版手办盲盒-经典款保卫者</p>
                <p class="good-pri">￥79</p>
        
            </dd>
        </dt>
        </dl></a>
     
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footer1">
        <a href=""><img src="./images/20.png" alt="" /></a
        ><a href=""><img src="./images/21.png" alt="" /></a>
      </div>
      <ul class="footer2">
        <li><a href="">购物指南</a></li>
        <li><a href="">配送方式</a></li>
        <li><a href="">常见操作</a></li>
        <li><a href="">售后服务</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <div class="footer3">
        <span><img src="./images/22.png" alt="" /></span>
        <span><img src="./images/23.png" alt="" /></span>
      </div>
    </div>
    <div class="footer-end">
      <div class="footer-end1"><img src="./images/24.png" alt="" /></div>
    </div>
    <script>
      ajax({
        url: "./page.php",
        dataType: "json",

        success(res) {
          console.log(res);
          renderDom(res);
        },
      });

      // console.log(countEle)

      function renderDom(data) {
        let contentEle = document.querySelector(".content");

        contentEle.innerHTML = "";
        data.forEach((item) => {
          let dlEle = document.createElement("dl");
          dlEle.className = "count";
          dlEle.innerHTML = `<a href="./content.html?${item.id}"><dt class="box"><img src="${item.images}" alt="">
    <dd class="good-info"> 
        <p class="good-name">${item.name}</p>
        <p class="good-pri">￥${item.price}</p>

    </dd>
</dt>
</a>
`;
          contentEle.appendChild(dlEle);

        //   dlEle.onclick = function () {
        //     window.location.href = "./content.html";
        //   };
        let btn = document.querySelector("button");
      let searchEle = document.querySelector(".search");
      btn.onclick = function () {
        let search = searchEle.value;
        ajax({
          url: "./search.php",
          method: "post",
          data: {
            search,
          },
          dataType: "json",
          success(res) {
            console.log(res);
            
            renderDom(res);
          },
        });
      };
        });
      };
      
     
    </script>
  </body>
</html>
